<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="write-off-container">
    <div :class="{'mobile-el-form': showMobilePage}" class="header-box">
      <Title title="核销信息" style="margin-bottom: 8px" />
      <el-row style="transform: translateX(-3px)">
        <el-form label-position="right" label-width="7em">
          <el-col :span="6">
            <el-form-item label="付款人名称:">
              <div class="ellipsisOne">{{ financeDetail.orderList | showString('payName') }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核销客户:">
              <div class="ellipsisOne">{{ financeDetail.orderList | showString('accountName') }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:">
              <ToolTip :content="financeDetail.orderList.departmentName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="可核销金额:">
              <span v-if="financeDetail.orderList.writeOffAmount">
                {{ financeDetail.orderList | showString('writeOffAmount') }} 元
              </span>
              <span v-else>0 元</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="到账日期:">
              <div class="ellipsisOne">{{ financeDetail.orderList | showString('arrivalTime') }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收入金额:">
              <span v-if="financeDetail.orderList.incomeAmount">
                {{ financeDetail.orderList | showString('incomeAmount') }} 元
              </span>
              <span v-else>0 元</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型:">
              <div class="ellipsisOne"><span>{{ financeDetail.orderList.flowType | flowTypeFilter }}</span></div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div v-if="showMobilePage" class="flex-center charge-mobile-filter">
      <div class="order-select-info">
        <template v-if="financeDetail.items.length && !multipleSelectionAll.length">
          提示：<span style="color: #FF4E5F">请选择需要参与核销的订单</span>
        </template>
        <template v-if="multipleSelectionAll.length">
          已选<span class="statistics-num">{{ multipleSelectionAll.length }}</span>条，
          可核销金额<span class="statistics-num" style="margin-right: 10px">{{ totalWriteOffAmount }}</span>
          核销金额<span class="statistics-num">{{ inputWriteOffAmount }}</span>
          <el-button type="text" size="small" @click="clearSelect">
            <span class="el-icon-close"/>
          </el-button>
        </template>
      </div>
      <FilterInput
        ref="FilterToolRef"
        v-model="paramsObj"
        :filter-list="filterList"
        :show-mobile-icon="showMobilePage"
        show-search-btn
        class="filter-tool"
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus"/>
    </div>
    <FilterInput
      v-else
      ref="FilterToolRef"
      v-model="paramsObj"
      :filter-list="filterList"
      show-search-btn
      class="filter-tool"
      @handelClick="queryClick"
      @queryEmpty="queryEmpty"
      @filterTagStatus="filterTagStatus"/>
    <u-table
      v-loading="listLoading"
      ref="financeTable"
      :data="financeDetail.items"
      :height="setTableHeight"
      :row-class-name="tableRowClassName"
      :row-height="49"
      :border="false"
      use-virtual
      element-loading-text="加载中..."
      empty-text="暂无数据"
      fit
      hightlight-current-row
      @select="handleSelectionChange"
      @select-all="handleSelectionAll"
    >
      <u-table-column :selectable="selectable" align="center" type="selection" width="50" fixed="left"/>
      <u-table-column align="left" label="订单编号" min-width="192">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderId" is-can-click @handelClick="goOrder(scope.row)" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="下单日期" width="110">
        <template slot-scope="scope">{{ scope.row.orderTime | standardFormatNoHour }}</template>
      </u-table-column>
      <u-table-column align="left" label="账号" width="132">
        <template slot-scope="scope">
          <resource-info
            v-if="scope.row.accountNameOrganization && scope.row.resourceCode && scope.row.category === 0"
            :resource-name="scope.row.resourceName"
            :account-name-organization="scope.row.accountNameOrganization"
            :resource-id="scope.row.resourceCode"
            account-name-platform="none"
            account-belong-name="none"
          />
          <ToolTip v-else :content="scope.row.resourceName"/>
        </template>
      </u-table-column>
      <u-table-column align="right" label="含税金额(元)" width="120">
        <template slot-scope="scope">{{ (scope.row.taxAmount / 100).toFixed(2) }}</template>
      </u-table-column>
      <u-table-column align="right" label="可核销金额(元)" width="120">
        <template slot-scope="scope">{{ (scope.row.notWriteOffAmount / 100).toFixed(2) }}</template>
      </u-table-column>
      <u-table-column :show-overflow-tooltip="true" align="left" label="品牌名称" width="140">
        <template slot-scope="scope">{{ scope.row.theme || '--' }}</template>
      </u-table-column>
      <u-table-column align="left" label="收入类型" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.incomeTypeStr">{{ scope.row.incomeTypeStr || '--' }}</span>
          <span v-else-if="scope.row.incomeTypeStr === 0">{{ scope.row.incomeTypeStr }}</span>
          <span v-else>--</span>
        </template>
      </u-table-column>
      <u-table-column align="left" label="下单平台" width="140">
        <template slot-scope="scope">{{ scope.row.orderPlatform || '--' }}</template>
      </u-table-column>
      <u-table-column :show-overflow-tooltip="true" align="left" label="客户名称" width="200">
        <template slot-scope="scope">{{ scope.row.clientName || '--' }}</template>
      </u-table-column>
      <u-table-column align="left" label="客户类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.category === 1">{{ scope.row.clientType | clientType }}</span>
          <span v-else>{{ scope.row.clientType | clientStatusFilter }}</span>
        </template>
      </u-table-column>
      <u-table-column align="left" label="销售" width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.market" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="客户结算单" width="192">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.clientSettlementId" />
        </template>
      </u-table-column>
      <u-table-column v-if="showMobilePage" align="center" label="核销金额(元)" width="120">
        <template slot-scope="scope">
          <el-input
            v-only-number="{max: 9999999999999, min: -9999999999999, precision: 2, enableNull: true}"
            v-model="scope.row.creditAmount"
            type="number"
            size="small"
            class="credit-amount"
            @mousewheel.native.prevent
            @input="getAmount(scope)"
          />
        </template>
      </u-table-column>
      <u-table-column v-else fixed="right" align="center" label="核销金额(元)" width="120">
        <template slot-scope="scope">
          <el-input
            v-only-number="{max: 9999999999999, min: -9999999999999, precision: 2, enableNull: true}"
            v-model="scope.row.creditAmount"
            type="number"
            size="small"
            class="credit-amount"
            @mousewheel.native.prevent
            @input="getAmount(scope)"
          />
        </template>
      </u-table-column>
      <u-table-column v-if="showMobilePage" align="center" label="业绩月份" width="120">
        <template slot="header">
          <ToolTip content="以订单最后核销的流水所设置的业绩月份为准">
            <div class="custom-table-header">
              <span class="name">业绩月份</span>
              <i class="el-icon-warning" />
            </div>
          </ToolTip>
        </template>
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.performanceMonth"
            :clearable="false"
            :editable="false"
            type="month"
            size="small"
            style="width:140px"
            value-format="timestamp"
            format="yyyy/MM/dd"
          />
        </template>
      </u-table-column>
      <u-table-column v-else fixed="right" align="center" label="业绩月份" width="120">
        <template slot="header">
          <ToolTip content="以订单最后核销的流水所设置的业绩月份为准">
            <div class="custom-table-header">
              <span class="name">业绩月份</span>
              <i class="el-icon-warning" />
            </div>
          </ToolTip>
        </template>
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.performanceMonth"
            :clearable="false"
            :editable="false"
            type="month"
            size="small"
            style="width:140px"
            value-format="timestamp"
            format="yyyy/MM/dd"
          />
        </template>
      </u-table-column>
    </u-table>
    <el-row type="flex" justify="end" class="pagination-area">
      <div v-if="!showMobilePage" class="order-select-info">
        <template v-if="financeDetail.items.length && !multipleSelectionAll.length">
          提示：<span style="color: #FF4E5F">请选择需要参与核销的订单</span>
        </template>
        <template v-if="multipleSelectionAll.length">
          已选<span class="statistics-num">{{ multipleSelectionAll.length }}</span>条，
          可核销金额<span class="statistics-num" style="margin-right: 10px">{{ totalWriteOffAmount }}</span>
          核销金额<span class="statistics-num">{{ inputWriteOffAmount }}</span>
          <el-button type="text" size="small" @click="clearSelect">
            <span class="el-icon-close"/>
          </el-button>
        </template>
      </div>
      <el-pagination
        v-show="financeDetail.total > 0"
        :current-page="financeDetail.page"
        :page-size="financeDetail.perPage"
        :total="financeDetail.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <fixed-pagination>
      <div class="center">
        <el-button :loading="loading" type="primary" size="small" class="submit-btn" @click="toSubmit">提交</el-button>
        <el-button type="info" size="small" class="cancel-btn-style" @click="toBack">取消</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import { getWriteOff, writeOffFinance } from '@/api/finance';
import { showString } from '@/filters/showString';
import { clientStatusFilter, incomeTypeStatusFilter, clientType } from '@/filters/status';
import { standardFormatNoHour } from '@/filters/date';
import Title from '@/components/Title';
import { getIncomeType } from '@/api/select';
import ResourceInfo from '@/components/ResourceInfo';
import ElMessage from '@/utils/message';
import { showModal } from '@/utils/message';
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import { mapState } from 'vuex';

export default {
  filters: {
    showString,
    clientStatusFilter,
    incomeTypeStatusFilter,
    standardFormatNoHour,
    clientType,
    flowTypeFilter(val) {
      // 流水类型。0:普通 1:对抵
      let text = '--';
      switch (val) {
        case 0:
          text = '普通';
          break;
        case 1:
          text = '对抵';
          break;
      }
      return text;
    }
  },
  components: { Title, ResourceInfo },
  mixins: [tableSelections, TableAdaptive],
  data() {
    return {
      tableRefName: 'financeTable', // 表格的ref名称
      idKey: 'id',
      financeDetail: {
        items: [],
        orderList: [],
        page: 1,
        perPage: 20,
        total: 0
      },
      page: 1,
      paramsObj: {},
      flowId: '',
      clientId: '',
      listLoading: true,
      loading: false,
      writeOffAmount: '',
      amountArray: [],
      isCheck: false,
      isUmyTable: true,
      creditAmount: 0,
      incomeOptions: [],
      selectable(row) {
        return !(row.category === 1 && row.projectStatus > 1);
      },
      clientName: '',
      verificationState: 0,
      totalWriteOffAmount: 0, // 可核销总金额
      inputWriteOffAmount: 0 // 录入的核销金额
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tableOutsideHeight() {
      return 348;
    },
    filterList() {
      return [
        { keyword: 'orderId', name: '订单编号', type: 'input' },
        { keyword: 'resourceName', name: '账号', type: 'input' },
        { keyword: 'theme', name: '品牌名称', type: 'input' },
        { keyword: 'orderPlatform', name: '下单平台', type: 'input' },
        { keyword: 'market', name: '销售', type: 'input' },
        { keyword: 'clientSettlementId', name: '客户结算单', type: 'input' },
        { keyword: 'incomeType', name: '收入类型', type: 'select', options: this.incomeOptions },
        { keyword: 'clientType', name: '客户类型', type: 'select', options: [
          { label: '全部', value: -1 },
          { label: '公司', value: 0 },
          { label: '个人', value: 1 }
        ] },
        { keyword: 'createTime', name: '下单日期', timeType: 'daterange', type: 'rangeDate' }
      ];
    }
  },
  created() {
    const { clientId, dayAccountId } = this.$route.params;
    const { clientName, verificationState = 0 } = this.$route.query;
    this.flowId = Number(dayAccountId) || '';
    this.clientId = Number(clientId) || '';
    if (clientName) {
      this.clientName = decodeURI(clientName);
    }
    this.verificationState = Number(verificationState); // 1 代表已完成
    this.getWriteOffDetail(true);
    this.incomeTypeList();
  },
  methods: {
    getWriteOffDetail(reset = false) {
      if (reset) this.page = 1;
      this.listLoading = true;
      const paramsObj = JSON.parse(JSON.stringify(this.paramsObj));
      // 时间处理
      if (paramsObj.createTime && paramsObj.createTime.length === 2) {
        paramsObj.createStartTime = Math.round(paramsObj.createTime[0] / 1000);
        paramsObj.createEndTime = Math.round(paramsObj.createTime[1] / 1000);
      }
      delete paramsObj.createTime;
      const params = {
        clientId: this.clientId,
        clientName: this.clientName,
        flowId: this.flowId,
        writeOffType: 0,
        ...paramsObj
      };
      getWriteOff(this.page, this.financeDetail.perPage, params).then(res => {
        this.financeDetail = res.data;
        /**
         * 如果流水的收入金额是否为正，只能核销含税金额为正的订单，且核销金额只能输入正数
         * 如果流水的收入金额是否为负或者为0，只能核销含税金额为负的订单，且核销金额只能输入负数
         */
        this.isPositive = Number(this.financeDetail.orderList.writeOffAmount) > 0; // 流水的收入金额是否为正

        this.financeDetail.orderList.arrivalTime = standardFormatNoHour(this.financeDetail.orderList.arrivalTime);
        this.writeOffAmount = this.financeDetail.orderList.writeOffAmount / 100;
        this.listLoading = false;
        // 翻页选中
        if (this.multipleSelectionAll && this.multipleSelectionAll.length > 0) {
          this.multipleSelectionAll.forEach(i => {
            res.data.items.forEach(j => {
              if (i.id === j.id) {
                j.creditAmount = i.creditAmount;
                j.performanceMonth = i.performanceMonth;
              }
            });
          });
        }
        if (this.setSelectRow) this.setSelectRow(res.data.items);
        // 翻页选中 end
      }, result => {
        // this.$message.error(result.message);
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    getWriteOffAmountInfo(isMsg = false) {
      // this.isPositive
      const total = this.financeDetail.orderList.writeOffAmount / 100; // 总可核销金额
      const had = this.multipleSelectionAll.reduce((sum, item) => (Number(item.creditAmount) || 0) + sum, 0);// 当前已勾选的总计核销金额
      const surplus = total - had; // 总剩余可核销金额
      // debugger;
      isMsg ? this.showWriteOffAmountMsg(surplus) : (() => {})();
      return { total, had, surplus };
    },
    showWriteOffAmountMsg(surplus) {
      const total = this.financeDetail.orderList.writeOffAmount / 100; // 总可核销金额
      this.isPositive ? this.messageAlert(surplus >= 0, surplus) : this.messageAlert(surplus <= 0 || total === 0, surplus);
    },
    messageAlert(surplusStatus, surplus) {
      let type = '';
      let msg = '';
      type = surplusStatus ? 'success' : 'warning';
      msg = surplusStatus ? `剩余可核销金额 ￥${surplus.toFixed(2)} 元` : `输入的金额已超过流水可核销金额 ￥${Math.abs(surplus.toFixed(2))} 元`;
      ElMessage[type](msg);
    },
    handleSelectionChange(selection, value) {
      this.selectTable(selection, value);
      const checkValue = this.multipleSelectionAll.find(item => {
        return item.id === value.id;
      });
      if (checkValue) {
        this.isCheck = true;
        const writeOffAmount = this.getWriteOffAmountInfo();
        if (checkValue.creditAmount === null || checkValue.creditAmount === '') {
          this.calculateAndSetCreditAmount(checkValue, writeOffAmount);
        }
      } else {
        value.creditAmount = null;
      }
      this.getWriteOffAmountInfo(true);
      this.setTotalWriteOffAmount();
      this.setInputWriteOffAmount();
    },
    clearSelect() {
      this.multipleSelectionAll = [];
      this.clearMixinSelection();
      this.handleSelectionAll([]);
    },
    // 计算可核销总额
    setTotalWriteOffAmount() {
      this.totalWriteOffAmount = this.multipleSelectionAll.reduce((total, currentValue) => {
        const curWriteOffAmount = currentValue.notWriteOffAmount || 0;
        return curWriteOffAmount / 100 + total;
      }, 0).toFixed(2);
    },
    // 计算录入的核销金额
    setInputWriteOffAmount() {
      const inputWriteOffAmount = this.multipleSelectionAll.reduce((total, currentValue) => {
        const curWriteOffAmount = currentValue.creditAmount ? parseFloat(parseFloat(currentValue.creditAmount).toFixed(2)) : 0;
        return curWriteOffAmount + total;
      }, 0);
      // 解决0.1 + 0.2 !== 0.3问题
      this.inputWriteOffAmount = parseFloat(inputWriteOffAmount).toFixed(2);
    },
    handleSelectionAll(selection) {
      this.selectTable(selection);
      if (this.multipleSelectionAll.length > 0) {
        const writeOffAmount = this.getWriteOffAmountInfo();
        this.multipleSelectionAll.forEach((item, i) => {
          if (item.creditAmount === null || item.creditAmount === '') {
            this.calculateAndSetCreditAmount(item, writeOffAmount);
          }
        });
      } else {
        this.financeDetail.items.forEach(i => {
          i.creditAmount = null;
        });
      }

      this.getWriteOffAmountInfo(true);
      this.setTotalWriteOffAmount();
      this.setInputWriteOffAmount();
    },
    calculateAndSetCreditAmount(item, writeOffAmount) {
      const notWriteOffAmount = item.notWriteOffAmount / 100; // 该项可核销金额
      // 获取该项自动填充的最大/最小值
      const maxWriteOffAmount = Math.min(Math.abs(writeOffAmount.total), Math.abs(notWriteOffAmount));
      const curValIsPositive = notWriteOffAmount >= 0;
      const curMaxWriteAmount = maxWriteOffAmount === 0 ? null : curValIsPositive ? maxWriteOffAmount : -maxWriteOffAmount;
      const margin = notWriteOffAmount - (item.creditAmount || 0); // 该项剩余待核销
      const more = writeOffAmount.surplus - margin; // 剩余可核销差额
      if (this.isPositive) {
        const newVal = notWriteOffAmount + (more >= 0 ? 0 : more); // 确保核销总金额小于等于总可核销金额时的金额
        writeOffAmount.surplus += item.creditAmount || 0; // 重分配前重置已分配
        item.creditAmount = newVal <= 0 ? curMaxWriteAmount : newVal.toFixed(2); // 分配并确保非负数
      } else {
        const newVal = notWriteOffAmount + (more <= 0 ? 0 : more); // 确保核销总金额小于等于总可核销金额时的金额
        writeOffAmount.surplus += item.creditAmount || 0; // 重分配前重置已分配
        item.creditAmount = newVal >= 0 ? curMaxWriteAmount : newVal.toFixed(2); // 分配并确保非正数
      }
      writeOffAmount.surplus -= item.creditAmount; // 更新已分配
    },
    getAmount(scope) {
      // 限制规则：流水可核销金额、订单列表某条可核销金额 取绝对值更小的，再取绝对值
      const notWriteOffAmount = Math.abs(scope.row.notWriteOffAmount / 100); // 该行可核销金额
      const writeOffAmount = Math.abs(this.financeDetail.orderList.writeOffAmount / 100); // 该订单/流水可核销金额
      const min = writeOffAmount > notWriteOffAmount ? notWriteOffAmount : writeOffAmount;
      const max = writeOffAmount > notWriteOffAmount ? writeOffAmount : notWriteOffAmount;
      if (notWriteOffAmount === 0 || writeOffAmount === 0) {
        if (scope.row.creditAmount > 0) {
          scope.row.creditAmount = 0;
        }
        if (scope.row.creditAmount < 0 && scope.row.creditAmount < -max) {
          scope.row.creditAmount = -max;
        }
      } else {
        if (Number(scope.row.creditAmount) < 0) {
          scope.row.creditAmount = scope.row.creditAmount < -min ? -min : scope.row.creditAmount;
        }
        if (Number(scope.row.creditAmount) > 0) {
          scope.row.creditAmount = scope.row.creditAmount > min ? min : scope.row.creditAmount;
        }
      }
      const curRowIndex = this.multipleSelectionAll.findIndex(row => row.id === scope.row.id);
      curRowIndex !== -1 && this.$set(this.multipleSelectionAll, curRowIndex, scope.row);
      // 提示还剩可核销金额
      if (this.multipleSelectionAll.some(item => item.id === scope.row.id)) { // 已选择
        this.getWriteOffAmountInfo(true);
      }
      this.setInputWriteOffAmount();
    },
    toWriteOff(array) {
      if (array.length === 0) {
        ElMessage.error('请选择核销订单！');
        return;
      }
      const count = array.some(i => {
        return Number(i.creditAmount) === 0;
      });
      if (count) {
        ElMessage.error('填写的核销金额不允许为0');
        return;
      }
      showModal('请确认是否核销', '', {
        iconClass: 'del-icon'
      }).then(() => {
        this.loading = true;
        writeOffFinance(this.flowId, array).then(res => {
          this.loading = false;
          this.$confirm(res.message, '', {
            iconClass: 'charge-icon-success',
            customClass: 'del-message',
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'success',
            center: true
          })
            .then(() => {
              this.$router.push({
                name: 'chargeOffDetail',
                params: { chargeOffId: this.flowId }
              });
            })
            .catch(() => {
              this.$router.push({
                name: 'chargeOffDetail',
                params: { chargeOffId: this.flowId }
              });
            });
        }, result => {
          this.loading = false;
        });
      }).catch(() => {
        return false;
      });
    },
    toSubmit() {
      const writeOffAry = [];
      this.multipleSelectionAll.map(item => {
        const obj = {};
        obj.performanceMonth = (item.performanceMonth / 1000).toFixed(0);
        obj.creditAmount = (item.creditAmount * 100).toFixed(0);
        obj.id = item.id;
        obj.type = item.category;
        writeOffAry.push(obj);
      });
      this.toWriteOff(writeOffAry);
    },
    toBack() {
      this.$router.push({
        name: 'dayAccount'
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getWriteOffDetail();
    },
    handleSizeChange(val) {
      this.financeDetail.perPage = val;
      this.getWriteOffDetail(true);
    },
    // 获取收入类型的列表
    async incomeTypeList() {
      try {
        const result = await getIncomeType();
        if (result.data) {
          result.data.forEach(i => {
            i.value = i.id;
            i.label = i.name;
          });
          this.incomeOptions = result.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    goOrder(item) {
      let routeUrl = null;
      if (!item.category) { // 订单详情
        routeUrl = this.$router.resolve({
          name: 'orderDetail',
          params: { orderId: item.jumpId || item.id }
        });
      } else if (item.category === 1) { // 项目详情
        routeUrl = this.$router.resolve({
          name: 'projectDetail',
          params: { id: item.jumpId || item.id }
        });
      } else if (item.category === 2) { // 萌力订单
        routeUrl = this.$router.resolve({
          name: 'mengliOrderDetail',
          params: { id: item.jumpId || item.id },
          query: { type: item.mengliOrderTab }
        });
      }
      if (routeUrl) window.open(routeUrl.href, '_blank');
    },
    // 查询
    queryClick() {
      this.getWriteOffDetail(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.getWriteOffDetail(true);
    }
  }
};
</script>
<style lang="scss" scoped>
.custom-table-header {
  display: flex;
  align-items: center;
  .name {
    display: inline-block;
    margin-right: 5px;
  }
}
.write-off-container {
  margin: 16px;
  background-color: #fff;
  padding: 24px;
  min-height: calc(100vh - 120px);
  .header-box {
    .el-col {
      .el-form-item {
        border-right: 1px solid #eee;
        margin-bottom: 0 !important;
      }
    }
    .el-col:nth-child(4n) {
      .el-form-item {
        border-right: none;
      }
    }
    ::v-deep .el-form-item__label {
      color: #999;
    }
    ::v-deep .el-form-item__content {
      color: #333;
    }
  }
  .mobile-el-form {
    .el-col {
      .el-form-item {
        border-right: none !important;
      }
    }
  }
  .filter-tool {
    margin: 20px 0 12px;
  }
  .charge-mobile-filter {
    justify-content: space-between;
  }
  &::v-deep {
    .credit-amount > input {
      width: 90px;
      height: 24px;
      border: 1px solid #e4e4e4;
    }
    .el-date-editor.el-input {
      input {
        width: 100px;
        height: 24px;
        padding-right: 12px;
        border: 1px solid #e4e4e4;
      }
      .el-input__prefix {
        .el-input__icon {
          line-height: 24px !important;
        }
      }
    }
  }
  .pagination-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .order-select-info {
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      background-color: #FAFAFC;
      padding: 0 8px;
      border-radius: 4px;
      color: #666;
      .statistics-num {
        color: #406EFF;
        font-weight: bold;
        margin: 0 2px;
      }
      .el-icon-close {
        font-size:14px;
        margin-left:5px;
        color: #666;
      }
      .el-icon-close:hover {
        color: #406EFF;
        font-weight: bold;
      }
    }
  }
  .del-message {
    width: 480px !important;
  }
}
</style>
<style lang="scss">
.charge-mobile-filter {
  .filter-tool {
    .mobile-icon {
      margin-right: 0 !important;
    }
  }
}
</style>
